<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商城 - 邦伴用户端</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      max-width: 480px;
      margin: 0 auto;
      background: #fff;
      min-height: 100vh;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .primary-light-bg {
      background-color: var(--primary-light);
    }
    
    .search-box {
      background-color: var(--primary-light);
      border-radius: 20px;
    }
    
    .product-card {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .filter-btn.active {
      color: var(--primary);
      border-color: var(--primary);
    }
    
    .tab-active {
      color: var(--primary);
      border-bottom: 2px solid var(--primary);
    }
    
    .category-tab {
      white-space: nowrap;
      overflow-x: auto;
      scrollbar-width: none; /* Firefox */
    }
    
    .category-tab::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Edge */
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
      <a href="index.html" class="mr-2">
        <i class="fas fa-arrow-left text-lg"></i>
      </a>
      <h1 class="text-lg font-medium flex-1 text-center">商城</h1>
      <div class="flex">
        <button class="mr-3">
          <i class="fas fa-search text-lg"></i>
        </button>
        <a href="cart.html">
          <i class="fas fa-shopping-cart text-lg"></i>
        </a>
      </div>
    </div>
    
    <!-- 商品分类标签 -->
    <div class="category-tab flex px-2 py-3 bg-white border-b border-gray-100">
      <div class="px-3 py-2 tab-active text-center">
        全部
      </div>
      <div class="px-3 py-2 text-gray-500 text-center">
        康复辅具
      </div>
      <div class="px-3 py-2 text-gray-500 text-center">
        护理用品
      </div>
      <div class="px-3 py-2 text-gray-500 text-center">
        健康监测
      </div>
      <div class="px-3 py-2 text-gray-500 text-center">
        老年用品
      </div>
      <div class="px-3 py-2 text-gray-500 text-center">
        母婴用品
      </div>
    </div>
    
    <!-- 筛选栏 -->
    <div class="flex border-b border-gray-100 bg-white">
      <div class="flex-1 text-center py-3 flex items-center justify-center text-sm">
        <span>综合</span>
        <i class="fas fa-sort-down ml-1"></i>
      </div>
      <div class="flex-1 text-center py-3 flex items-center justify-center text-sm text-gray-500">
        <span>销量</span>
      </div>
      <div class="flex-1 text-center py-3 flex items-center justify-center text-sm text-gray-500">
        <span>价格</span>
        <i class="fas fa-sort ml-1"></i>
      </div>
      <div class="flex-1 text-center py-3 flex items-center justify-center text-sm text-gray-500">
        <span>筛选</span>
        <i class="fas fa-filter ml-1"></i>
      </div>
    </div>
    
    <!-- 商品列表 -->
    <div class="p-3">
      <div class="grid grid-cols-2 gap-3">
        <!-- 商品1 -->
        <a href="product_detail.html" class="product-card bg-white overflow-hidden">
          <div class="h-40 bg-gray-100 flex items-center justify-center">
            <img src="https://source.unsplash.com/random/300x300/?wheelchair" alt="轻便折叠轮椅" class="w-full h-full object-cover">
          </div>
          <div class="p-3">
            <h3 class="text-sm font-medium mb-1">轻便折叠轮椅</h3>
            <p class="text-xs text-gray-500 mb-2 line-clamp-1">铝合金材质 轻便耐用</p>
            <div class="flex justify-between items-center">
              <span class="text-sm primary-color font-bold">¥299</span>
              <span class="text-xs text-gray-400">已售152件</span>
            </div>
          </div>
        </a>
        
        <!-- 商品2 -->
        <a href="product_detail.html" class="product-card bg-white overflow-hidden">
          <div class="h-40 bg-gray-100 flex items-center justify-center">
            <img src="https://source.unsplash.com/random/300x300/?hospital-bed" alt="多功能护理床" class="w-full h-full object-cover">
          </div>
          <div class="p-3">
            <h3 class="text-sm font-medium mb-1">多功能护理床</h3>
            <p class="text-xs text-gray-500 mb-2 line-clamp-1">电动升降 防褥疮设计</p>
            <div class="flex justify-between items-center">
              <span class="text-sm primary-color font-bold">¥899</span>
              <span class="text-xs text-gray-400">已售98件</span>
            </div>
          </div>
        </a>
        
        <!-- 商品3 -->
        <a href="product_detail.html" class="product-card bg-white overflow-hidden">
          <div class="h-40 bg-gray-100 flex items-center justify-center">
            <img src="https://source.unsplash.com/random/300x300/?skincare" alt="舒缓护肤套装" class="w-full h-full object-cover">
          </div>
          <div class="p-3">
            <h3 class="text-sm font-medium mb-1">舒缓护肤套装</h3>
            <p class="text-xs text-gray-500 mb-2 line-clamp-1">敏感肌适用 天然成分</p>
            <div class="flex justify-between items-center">
              <span class="text-sm primary-color font-bold">¥159</span>
              <span class="text-xs text-gray-400">已售215件</span>
            </div>
          </div>
        </a>
        
        <!-- 商品4 -->
        <a href="product_detail.html" class="product-card bg-white overflow-hidden">
          <div class="h-40 bg-gray-100 flex items-center justify-center">
            <img src="https://source.unsplash.com/random/300x300/?brain-game" alt="老年健脑训练套装" class="w-full h-full object-cover">
          </div>
          <div class="p-3">
            <h3 class="text-sm font-medium mb-1">老年健脑训练套装</h3>
            <p class="text-xs text-gray-500 mb-2 line-clamp-1">促进脑部活力 预防认知障碍</p>
            <div class="flex justify-between items-center">
              <span class="text-sm primary-color font-bold">¥258</span>
              <span class="text-xs text-gray-400">已售87件</span>
            </div>
          </div>
        </a>
        
        <!-- 商品5 -->
        <a href="product_detail.html" class="product-card bg-white overflow-hidden">
          <div class="h-40 bg-gray-100 flex items-center justify-center">
            <img src="https://source.unsplash.com/random/300x300/?blood-pressure" alt="智能血压计" class="w-full h-full object-cover">
          </div>
          <div class="p-3">
            <h3 class="text-sm font-medium mb-1">智能血压计</h3>
            <p class="text-xs text-gray-500 mb-2 line-clamp-1">高精度测量 数据云同步</p>
            <div class="flex justify-between items-center">
              <span class="text-sm primary-color font-bold">¥199</span>
              <span class="text-xs text-gray-400">已售324件</span>
            </div>
          </div>
        </a>
        
        <!-- 商品6 -->
        <a href="product_detail.html" class="product-card bg-white overflow-hidden">
          <div class="h-40 bg-gray-100 flex items-center justify-center">
            <img src="https://source.unsplash.com/random/300x300/?walker" alt="多功能助行器" class="w-full h-full object-cover">
          </div>
          <div class="p-3">
            <h3 class="text-sm font-medium mb-1">多功能助行器</h3>
            <p class="text-xs text-gray-500 mb-2 line-clamp-1">轻便折叠 高度可调节</p>
            <div class="flex justify-between items-center">
              <span class="text-sm primary-color font-bold">¥329</span>
              <span class="text-xs text-gray-400">已售156件</span>
            </div>
          </div>
        </a>
        
        <!-- 商品7 -->
        <a href="product_detail.html" class="product-card bg-white overflow-hidden">
          <div class="h-40 bg-gray-100 flex items-center justify-center">
            <img src="https://source.unsplash.com/random/300x300/?massage" alt="颈椎按摩仪" class="w-full h-full object-cover">
          </div>
          <div class="p-3">
            <h3 class="text-sm font-medium mb-1">颈椎按摩仪</h3>
            <p class="text-xs text-gray-500 mb-2 line-clamp-1">多功能热敷 缓解疲劳</p>
            <div class="flex justify-between items-center">
              <span class="text-sm primary-color font-bold">¥239</span>
              <span class="text-xs text-gray-400">已售278件</span>
            </div>
          </div>
        </a>
        
        <!-- 商品8 -->
        <a href="product_detail.html" class="product-card bg-white overflow-hidden">
          <div class="h-40 bg-gray-100 flex items-center justify-center">
            <img src="https://source.unsplash.com/random/300x300/?baby-care" alt="婴儿监护器" class="w-full h-full object-cover">
          </div>
          <div class="p-3">
            <h3 class="text-sm font-medium mb-1">婴儿监护器</h3>
            <p class="text-xs text-gray-500 mb-2 line-clamp-1">高清摄像 双向通话</p>
            <div class="flex justify-between items-center">
              <span class="text-sm primary-color font-bold">¥359</span>
              <span class="text-xs text-gray-400">已售112件</span>
            </div>
          </div>
        </a>
      </div>
    </div>
    
    <!-- 筛选弹窗 (默认隐藏) -->
    <div class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden" id="filterModal">
      <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-xl" style="max-width: 480px; margin: 0 auto;">
        <div class="p-4 border-b border-gray-100">
          <div class="flex justify-between items-center">
            <h3 class="font-medium">商品筛选</h3>
            <button class="text-gray-400" onclick="document.getElementById('filterModal').classList.add('hidden')">
              <i class="fas fa-times"></i>
            </button>
          </div>
        </div>
        
        <div class="p-4">
          <!-- 价格区间 -->
          <div class="mb-4">
            <h4 class="font-medium mb-2">价格区间</h4>
            <div class="grid grid-cols-4 gap-2">
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">不限</button>
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">0-100元</button>
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">100-300元</button>
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">300元以上</button>
            </div>
          </div>
          
          <!-- 品牌 -->
          <div class="mb-4">
            <h4 class="font-medium mb-2">品牌</h4>
            <div class="grid grid-cols-4 gap-2">
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">不限</button>
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">品牌A</button>
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">品牌B</button>
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">品牌C</button>
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">品牌D</button>
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">品牌E</button>
            </div>
          </div>
          
          <!-- 适用人群 -->
          <div class="mb-6">
            <h4 class="font-medium mb-2">适用人群</h4>
            <div class="grid grid-cols-3 gap-2">
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">不限</button>
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">老年人</button>
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">术后病人</button>
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">孕妇</button>
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">婴幼儿</button>
              <button class="px-3 py-2 border border-gray-200 rounded-md text-sm">残障人士</button>
            </div>
          </div>
          
          <!-- 按钮 -->
          <div class="flex space-x-4">
            <button class="flex-1 py-3 border border-gray-200 rounded-lg text-base">重置</button>
            <button class="flex-1 py-3 primary-bg text-white rounded-lg text-base">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // 简单的筛选交互
    document.addEventListener('DOMContentLoaded', function() {
      // 分类标签切换
      const categoryTabs = document.querySelectorAll('.category-tab > div');
      categoryTabs.forEach(tab => {
        tab.addEventListener('click', function() {
          categoryTabs.forEach(t => {
            t.classList.remove('tab-active');
            t.classList.add('text-gray-500');
          });
          this.classList.add('tab-active');
          this.classList.remove('text-gray-500');
        });
      });
      
      // 打开筛选弹窗
      const filterBtn = document.querySelector('.flex-1:last-child');
      filterBtn.addEventListener('click', function() {
        document.getElementById('filterModal').classList.remove('hidden');
      });
    });
  </script>
</body>
</html> 